<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更多书籍</title>
    <link rel="stylesheet" href="../../style/more/bootstrap.min.css">
    <link rel="stylesheet" href="../../style/more/indexStyle.css">
    <link rel="stylesheet" href="../../style/more/more.css">
    <link rel="shortcut icon" href="./../../favicon.ico">
    <script type="text/javascript" src="../../plugins/jQuery/jquery-3.6.0.js"></script>
    <script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script type="text/javascript" src="../../plugins/axios/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css">
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <script src="../../plugins/layer-master/dist/layer.js"></script>
</head>

<body>
<div id="app">
    <nav class="public-header">
        <a href="../../index.html">网站首页</a>
        <a href="">我的订单</a>
        <a href="../../pages/cart/shoppingCart.html">我的购物车</a>
        <a href="">讨论区</a>
    </nav>
    <div class="container">
        <!-- 搜索框区域 -->
        <div class="row ssq">
            <div>
                <div class="col-md-3" style="font-size: 38px;text-align: center;">
                        <span style="font-family:'华文行楷'">{{bookname}}<span style="font-size:18px">共{{total}}条记录</span></span>
                </div>
                <div class="col-md-5 col-md-offset-2">
                    <div class="input-group input-group-lg">
                        <input type="text" class="form-control" placeholder="生命唯愿爱与自由"
                               aria-describedby="basic-addon2">
                        <span class="input-group-btn" id="basic-addon2">
                                <button class="btn btn-default" id="query">搜索</button>
                            </span>
                    </div>
                </div>
            </div>
            <!-- /.col-lg-6 -->
        </div>

        <div class="container">
            <ul class="media-list">
                <li class="media" v-for="(item,index) in booklist">
                    <div class="media-left">
                        <a href="#" class="media-left-a">
                            <img class="media-object more_media_img" :src=`http:${item.imageName}` alt="...">
                        </a>
                    </div>


                    <div class="media-body" style="overflow:visible">
                        <h4 class="media-heading"><span class="name">{{item.name}}</span></h4>
                        <span class="description">{{item.description}}</span>

                        <h4 class="address"><span class="author">{{item.author}}</span>&nbsp;&nbsp; <span
                                style="color:gray">/</span><span style="font-size:16px"
                                                                 class="publisher">&nbsp;&nbsp;{{item.publisher}}</span>
                        </h4>

                        <p id="jg">￥{{item.price}}</p>
                        <button :class="[ !item.show == show ? isactive ==index?'btn class2': 'btn gw-btn':'btn class2'] "
                        @click="addCart(item.id)">
                            <i
                                    class="fa fa-cart-plus"></i>&nbsp;&nbsp;{{item.show?"此书已在购物车中":"加入购物车"}}
                        </button>
                        <!-- <button  @click="addCart(index)"   v-show="show" class="btn class2" ><i class="fa fa-cart-plus"></i>&nbsp;&nbsp;该书已在购物车中</button> -->

                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="extra">
        <div class="wrapper">
            <!-- 版权信息 -->
            <div class="copyright">
                <p>
                    <a href="javascript:;">关于我们</a>
                    <a href="javascript:;">帮助中心</a>
                    <a href="javascript:;">售后服务</a>
                    <a href="javascript:;">配送与验收</a>
                    <a href="javascript:;">商务合作</a>
                    <a href="javascript:;">搜索推荐</a>
                    <a href="javascript:;">友情链接</a>
                </p>
                <p>CopyRight &copy; 小兔鲜儿</p>
            </div>
        </div>
    </div>
</div>
<script>
    // 取消vue的开发模式
    Vue.config.productionTip = false;

    var vm = new Vue({
        el: '#app',
        data: {
            bookname: '', //标题名字
            booklist: [], //图书信息列表
            categoryId: '', // 分类id
            url: '/category/', //网址，
            gouwulist: [], //用户购物车信息
            show: true, //购物车颜色的显示
            cartText: "加入购物车", //购车图标内文字显示
            isactive: -1,
            searchShow: false, //通过搜索来显示的内容
            total:0,//图书总数
            searchtext:''
        },
        methods: {
           loadFreshBookMore(page) {
               axios({
                   method:'get',
                   url:'http://192.168.8.74:8001/book/fresh_more/'+page
               }).then(resp=>{
                   this.booklist=resp.data.data.records
                   this.total=resp.data.data.total
               })
           },
            loadLowerBookMore(page) {
                axios({
                    method:'get',
                    url:'http://192.168.8.74:8001/book/lower_more/'+page
                }).then(resp=>{
                    this.booklist=resp.data.data.records
                    this.total=resp.data.data.total
                })
            },
            loadCategoryDate(page,id){
                axios({
                    method:'get',
                    url:'http://192.168.8.74:8001/book/category/'+id+'/'+page
                }).then(resp=>{
                    this.booklist=resp.data.data.records
                    this.total=resp.data.data.total
                })
            },
            searchBookName(page) {
               console.log(111)
                console.log(this.searchtext)
                axios({
                    method:'get',
                    url:'http://192.168.8.74:8001/book/search_book/'+this.searchtext+'/'+page
                }).then(resp=>{
                    this.booklist=resp.data.data.records
                    this.total=resp.data.data.total
                })
            },
            //加入购物车
            addCart(bookId){
               axios({
                   method:'post',
                   url:'http://192.168.8.74:8001/cart/add/'+bookId,
                   headers:{
                       token:localStorage.getItem('front_token')
                   }
               }).then(resp=>{
                   //加入购物车是否成功
                   if (resp.data.success){
                       this.$message({
                           message:'加入购物车成功',
                           type:'success'
                       });
                   }else {
                       this.$message({
                           message:'加入购物车失败',
                           type:'error'
                       });
                   }
               })
            }
        },
        created() {
          let type=sessionStorage.getItem('type')
            this.bookname=sessionStorage.getItem('title')
            if (type==='1'){
                this.loadFreshBookMore(1)
            }else if (type==='2'){
                this.loadLowerBookMore(1)
            }else if (type==='3'){
                let id=sessionStorage.getItem('category_id')
                this.loadCategoryDate(1,id)
            }else if (type==='4'){
                this.searchtext=sessionStorage.getItem('title')
                this.searchBookName(1)
            }
        },
        mounted() {

        },
    });
</script>
</body>

</html>